import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Keyboard,
  Modal,
  ScrollView,
  DeviceEventEmitter,
} from 'react-native';
import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {NormalHeader} from '../../components/NavigationHeader';
import {showToast} from '../../components/Toast';
import {userLogout} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import {TextButton, LinearButton} from '../../components/Button';
import {updateUserInfo, queryChainConfig} from '../../redux/action';
import FetchUtils from '../../api/Fetch';

//#FFCB26
class Auction extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      chains: [
        {
          name: 'BSC',
          type: 0,
        },
        {
          name: 'Arbitrum',
          type: 1,
        },
      ],
      currentType: FetchUtils.getChainUrl().indexOf('arbitrum') != -1,
    };
  }
  componentDidMount() {
    super.componentDidMount();

    //dev环境没有网络可以切换
    console.log('===========');
    console.log(FetchUtils.getChainUrl().indexOf('dev'));
    if (FetchUtils.getChainUrl().indexOf('dev.') !== -1) {
      this.setState({
        chains: [
          {
            name: 'BSC',
            type: 0,
          },
        ],
      });
    }
  }

  checkNetWork = () => {
    FetchUtils.modifyUrl(this.state.currentType);
    this.props.updateUserInfo();
    this.props.queryChainConfig();
    DeviceEventEmitter.emit('refreshHomeList');
    this.props.navigation.goBack();
  };

  renderComponent = () => {
    return (
      <View style={{flex: 1, backgroundColor: '#160231'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Switch"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <ScrollView style={{flex: 1}}>
          <View
            style={{
              margin: 20,
              backgroundColor: 'white',
              borderRadius: 10,
              padding: 20,
            }}>
            <Text
              style={{
                fontSize: 18,
                color: '#7304F3',
                fontWeight: 'bold',
                marginBottom: 20,
              }}>
              Chain
            </Text>
            {this.state.chains.map((item) => {
              return (
                <TouchableWithoutFeedback
                  key={item.name}
                  onPress={() => {
                    this.setState({
                      currentType: item.type,
                    });
                  }}
                  style={{
                    width: '100%',
                  }}>
                  <View
                    style={{
                      flex: 1,
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      borderBottomColor: 'rgba(220,220,220,0.8)',
                      borderBottomWidth: 1,
                      borderBottomStyle: 'solid',
                      paddingTop: 10,
                      paddingBottom: 10,
                    }}>
                    <Text
                      style={{
                        fontSize: 18,
                        color: '#7104F4',
                      }}>
                      {item.name}
                    </Text>
                    {this.state.currentType == item.type ? (
                      <Image
                        source={require('../../assets/user/check_icon.png')}
                        style={{width: 20, height: 20, paddingRight: 20}}
                      />
                    ) : null}
                  </View>
                </TouchableWithoutFeedback>
              );
            })}
            <LinearButton
              text={'Sure'}
              buttonStyle={{
                flex: 1,
              }}
              onPress={this.checkNetWork}></LinearButton>
          </View>
          <View
            style={{
              width: '100%',
              height: this.props.widgetLayout.show
                ? this.props.widgetLayout.height
                : 0,
              marginTop: 10,
            }}></View>
        </ScrollView>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
  widgetLayout: state.Layout.widgetLayout,
});

const mapDispatchToProps = (dispatch) => ({
  updateUserInfo: (item) => dispatch(updateUserInfo(item)),
  queryChainConfig: (item) => dispatch(queryChainConfig(item)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Auction);
